<script setup>
/**
 * @name: 模板广场-组件
 * @description：TemplateList
 * @update: 2021/5/31 11:06
 */
// vue相关
import { computed, onMounted, onUnmounted, reactive, ref, watch } from "vue";
// 路由
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import {  notification } from "ant-design-vue";
import { onBeforeRouteLeave } from "vue-router";
// 充值弹窗
import vipModal from '@/socialMedia/Vip/vipModal.vue'
const vipVisible = ref(false)

const route = useRoute();
const router = useRouter();

/**
 * @params {1 - 我的模板 2 - 模板广场}
 */
const query = computed(() => {
  return route.query?.templateType;
})

// tabs 标签页切换 1-模板广场 2-我的模板
const activeKey = ref("1");

onMounted(() => {
  if(!!query.value){    
    query.value == 1 ? activeKey.value = "2" : activeKey.value = "1"  
  }
})


// icon引入
import { CloseOutlined } from "@ant-design/icons-vue";
// 工具引入
import _ from "lodash";

// 模板广场组件
import FormworkSquare from "./components/FormworkSquare.vue";
// 我的模板组件
import MyTemplate from "./components/MyTemplate.vue";

// 弹窗组件
import addTemplateDialog from "./components/addTemplateDialog.vue";

const store = useStore();

const dialog = ref(null);
// 模板添加完成. 更新列表
const updateList = () => {
  // debugger
  if (activeKey.value == "1") {
    formworkSquare.value && formworkSquare.value.updateList();
  } else {
    myTemplate.value && myTemplate.value.updateList();
  }
}


const formworkSquare = ref(null);
const myTemplate = ref(null);

const isopendialog = ref(false)

const addTemplate = () => {
  if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        vipVisible.value = true
      } else {
    dialog.value && dialog.value.showModal(activeKey.value);
        // isopendialog.value = true
      }
 
};

const closefn = () => {
   isopendialog.value = false
  console.log('关闭弹窗');
}


// 搜索框事件
const templateName = ref("");
// 创建防抖函数
const debounceSearch = _.debounce((name) => {
  if (activeKey.value == "1") {
    formworkSquare.value && formworkSquare.value.setStateName(name);
  } else {
    myTemplate.value && myTemplate.value.setStateName(name);
  }
}, 350);
// 监听输入, 防抖获取列表
const searchInputChange = (e) => {
  debounceSearch(e.target.value);
};

// 标签切换, 置空name
const tabsChange = () => {
  templateName.value = "";
  if (activeKey.value == "1") {
    formworkSquare.value && formworkSquare.value.setStateName("");
  } else {
    myTemplate.value && myTemplate.value.setStateName("");
  }
};

const clipRole = ref([])

watch(
      () => store.state.user?.clipRole,
      (val) => {
        if (val) {

          clipRole.value = val;
        } else {
          clipRole.value = [];
        }
      },
      {
        deep: true,
        immediate: true,
      }
);

const bye = ref(true)
onBeforeRouteLeave((to, from, next) => {
  bye.value = false
  next(true)
  console.log(bye.value ,    '离开');
});
    
</script>
<template v-if="bye">
  <div class="TemplateList_content" ref="TemplateList_content" >
    <!-- 头部搜索框卡片 -->
    <div class="title_serch_box">
      <div class="headline">
        <div class="headline_title_box">
          <h1 class="headline_title_text">视频模板广场</h1>
          <span class="headline_subtitle_text"
            >零视频基础，轻松开启您创作之旅</span
          >
        </div>
        <div class="serch_box">
          <a-input
            v-model:value="templateName"
            placeholder="请输入模板名称"
            @change="searchInputChange"
          >
            <template #prefix>
              <search-outlined />
            </template>
          </a-input>
        </div>
      </div>
    </div>

    <div class="content">
      <!-- <a-button  class="add_newtemplate" type="primary" @click="addTemplate">新建模板</a-button> -->
      <a-button v-if="clipRole.includes('create_official_template') && activeKey == '1'" class="add_newtemplate" type="primary" @click="addTemplate">新建模板</a-button>
      <a-button v-if="clipRole.includes('myTemplate') && activeKey == '2'" class="add_newtemplate" type="primary" @click="addTemplate">新建模板</a-button>


      <a-tabs v-model:activeKey="activeKey" @change="tabsChange">
        <a-tab-pane   key="1" tab="模板广场">
          <FormworkSquare
            ref="formworkSquare"
            :activeKey="activeKey"
          ></FormworkSquare>
        </a-tab-pane>
        <a-tab-pane  key="2" tab="我的模板" >
          <MyTemplate ref="myTemplate" @closefn="closefn" :isopendialog="isopendialog" :activeKey="activeKey"></MyTemplate>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- 添加模板 -->
    <addTemplateDialog ref="dialog" :type="1" :template_public="activeKey == 1 ? 1 : 0" @updateList="updateList"></addTemplateDialog>
      <!-- 充值弹窗 -->
  <vipModal :visible="vipVisible" @close="vipVisible = false"></vipModal>
  </div>
</template>

<style lang="less" scoped>
// 筛选列表中 小标题的颜色
@filter_item_title_color: rgba(28, 31, 35, 0.6);
.TemplateList_content {
  padding: 14px 14px 0;
  min-width: 650px;
  // 头部搜索框卡片
  .title_serch_box {
    background: url(@/views/shotstack/CreationCenter/assets/banner.jpg)
      no-repeat;
    background-size: cover;
    background-position: 50%;
    height: 142px;
    border-radius: 20px;
    .headline {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px 0;
      .serch_box {
        width: 600px;
        :deep(.ss-input-affix-wrapper) {
          border-radius: 40px;
          height: 40px;
          background-color: rgba(255, 255, 255, 0.5) !important;
        }
        :deep(.ss-input) {
          background-color: transparent;
          border: none;
        }
      }
      .headline_title_box {
        text-align: center;
        margin-bottom: 10px;
        .headline_title_text {
          margin-bottom: 5px;
          font-size: 18px;
          font-weight: 600;
          line-height: 1.5;
        }
        .headline_subtitle_text {
          color: rgba(28, 31, 35, 0.6);
          line-height: 1.5;
        }
      }
    }
  }
  .content {
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 20px;
    .add_newtemplate {
      position: absolute;
      right: 0;
      top: 7px;
      z-index: 999;
      padding: 0 10px;
      border-radius: 3px;
      height: 28px;
    }

    // loding 容器
    .example {
      text-align: center;
      border-radius: 4px;
      margin-bottom: 20px;
      padding: 30px 50px;
      margin: 20px 0;
      width: 100%;
    }
  }
}
</style>
